<template>
  <div>
    <h2>显示</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>ID</td>
          <td>Price</td>
          <td>img</td>
          <td>Windew</td>
          <td>Breakfast</td>
          <td>CreateTime</td>
        </tr>
        <tr v-for="item in list"> 
          <td>{{item.Id}}</td>
          <td>{{item.price}}</td>
          <td><img :src="item.Imgs" width="100" height="100"></td>
          <td>{{item.Windew?"有":"无"}}</td>
          <td>{{item.Breakfast?"有":"无"}}</td>
          <td>{{item.CreateTime.substring(0,10)}}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>总共{{sumindex}}页</span>
      <span>总共{{sumsize}}条</span>
      <span>{{ sumindex }}/{{ queryInfo.size }}</span>

     
      <input type="button" value="首页" @click="getpage('a')">
      <input type="button" value="上一页" @click="getpage('b')">
      <input type="button" value="下一页" @click="getpage('c')">
      <input type="button" value="尾页" @click="getpage('d')">

      <select v-model="queryInfo.size" @click="getsize">
        <option :value="item" v-for="item in arr">每页显示{{ item }}</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';

const route=useRoute();
const router=useRouter();


let data:any=reactive({
  queryInfo:{
    index:1,
    size:2,
  },
  list:[],
  sumindex:0,
  sumsize:0,
  arr:[1,2,4,5]
})

let {queryInfo,list,sumindex,sumsize,arr}=toRefs(data);

onMounted(()=>{
  getlist();
})
const getlist=()=>{
  let obj={
    index:queryInfo.value.index,
    size:queryInfo.value.size,

  }
  axios({
    url:'/api/one/show',
    method:'get',
    params:obj
  }).then((res)=>{
    console.log(res)
    list.value=res.data.data;
    sumindex.value=res.data.sumindex;
    sumsize.value=res.data.sumsize;
  }).catch((err)=>{
    console.log(err)
  })
}

const getsize=()=>{
  queryInfo.value.index=1;
  getlist();
}

const getpage=(str:any)=>{

  switch(str){
    case'a':
    if(queryInfo.value.index==1){
        alert('已经是第一页了')
        return;
    }
    queryInfo.value.index=1;
    break;
    case'b':
    if(queryInfo.value.index==1){
        alert('已经是第一页了')
        return;
    }
    queryInfo.value.index--;
    break;
    case'c':
    if(queryInfo.value.index==sumindex.value){
        alert('已经是第一页了')
        return;
    }
    queryInfo.value.index++;
    break;
    case'd':
    if(queryInfo.value.index==sumindex.value){
        alert('已经是第一页了')
        return;
    }
    queryInfo.value.index=sumindex.value;
    break;
  }
  getlist();
}
</script>

<style scoped>

</style>